import "./App.css";
import UploadFileModal from "./components/UploadModel";
import { useEffect, useMemo, useRef, useState } from "react";
import { PauseCircleFilled, PlayCircleFilled } from "@ant-design/icons";
import useAudio from "./hooks/useAudio";
import { message, Slider } from "antd";
import type { Lyric } from "lrc-kit";
import {
  useMemoizedFn,
  useMouse,
  useRafState,
  useReactive,
  useDrop,
  useKeyPress,
  useEventListener,
} from "ahooks";
import { LyricTypeEnum, LyricFormData } from "./components/components";
import LyricTextBox from "./components/LyricTextBox";
import Ruler from "./components/Ruler";
function App() {
  const [lyric, setLyric] = useState<Lyric[]>([
    {
      content: "圣三位一体神",
      timestamp: 28,
    },
    {
      content: "是我唯一的真神",
      timestamp: 31,
    },
  ]);
  const [scale, setScale] = useRafState(100);
  const formData = useReactive<LyricFormData>({
    url: "https://project-star.oss-cn-beijing.aliyuncs.com/assets/58cb581a620c004a81e90f0e16644680.mp3",
    text: `圣三位一体神
是我唯一的真神
我多么感谢你
一直与我同在	
圣三位一体神啊
愿你的灵来充满我吧
让我被五力充满吧
求宝座和超越时空
237的光来临到我身上
让在我里面
神的形象和生气
伊甸园的祝福复苏
赐我赐教会赐现场
空前绝后的真正的应允
牧会者和话语
重职者和现场
树不子和全世界
都活起来	
求神开启这三时代
让我在这事上被使用吧
让我用393创作所有作品
通过这祷告蒙受救活
七十门徒七十地区七十族群
七十国家的应允
让我享受这应允吧
赐我赐教会赐现场
空前绝后的真正的应允
牧会者和话语
重职者和现场
树不子和全世界 
都活起来	
求神开启这三时代
让我在这事上被使用吧
藉着圣三位一体神的灵
享受救活
七十国家的应允吧`,
    lyricType: LyricTypeEnum.text,
  });
  const { play, isPlaying, pause, duration, currentTime, updateCurrentTime } =
    useAudio(formData.url);
  const handleOk = useMemoizedFn((value) => {
    Object.assign(formData, value);
  });

  const musicSliderRef = useRef<HTMLDivElement>(null);

  useEffect(() => {}, []);

  useDrop(musicSliderRef, {
    onText(text) {
      console.log(text);
    },
  });

  useEventListener(
    "scroll",
    (e) => {
      e.preventDefault();
    },
    {
      target: document.body,
    }
  );

  useKeyPress("Space", (e) => {
    e.preventDefault();
    if (isPlaying) {
      pause();
    } else {
      play();
    }
  });

  const addLyricItem = useMemoizedFn((text: string) => {
    setLyric((pre) => {
      return [...pre, { content: text, timestamp: currentTime }];
    });
  });

  return (
    <>
      <LyricTextBox text={formData.text} onPlus={addLyricItem} />
      <div className="flex flex-col w-full h-full">
        <div className="px-4 flex justify-between py-4">
          <div className="flex gap-x-4">
            <UploadFileModal handleOk={handleOk} />
            <div className="w-[320px]">
              <Slider
                onChange={setScale}
                value={scale}
                min={10}
                max={180}
              ></Slider>
            </div>
          </div>
        </div>
        <div className="flex-1 overflow-hidden px-4 py-4">
          <div className="w-full h-full overflow-auto flex justify-start">
            <Ruler
              scale={scale}
              duration={duration}
              currentTime={currentTime}
              updateCurrentTime={updateCurrentTime}
              lyric={lyric}
              onChange={setLyric}
            />
          </div>
        </div>
        <div className=" bg-[var(--bg-100)] p-2 flex items-start justify-start flex-col">
          <div className="w-full">
            <Slider
              max={duration}
              min={0}
              value={currentTime}
              step={0.1}
              onChange={(value) => {
                updateCurrentTime(value);
              }}
            />
          </div>
          <div className="w-full flex justify-center">
            <div className="cursor-pointer">
              {!isPlaying ? (
                <PlayCircleFilled
                  onClick={() => {
                    if (!formData.url) {
                      message.error("请先上传音频");
                    }
                    play();
                  }}
                  style={{ fontSize: 32, color: "var(--text-100)" }}
                />
              ) : (
                <PauseCircleFilled
                  onClick={() => {
                    pause();
                  }}
                  style={{ fontSize: 32, color: "var(--text-100)" }}
                ></PauseCircleFilled>
              )}
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

export default App;
